<template>
	<view class="detail">
		
		<view v-if="onloadstart">
		
			<view class="title">{{detail.title}}</view>
			<view class="info">
				<text>作者:{{detail.author}}</text>
				<uni-dateformat :date="detail.posttime" :threshold="[6000,360000]"></uni-dateformat>
			</view>
			<view class="content">
				{{detail.content}}
			</view>
			<view class="img" v-for="item in detail.img" :key="index">
				<image :src="item" mode="widthFix"></image>
			</view>
			
			<view class="btn">
				<button size="mini" type="default" @click="goedit">
					<uni-icons type="compose" size="20"></uni-icons>修改</button>
				<button size="mini" type="warn" @click="onremove">
					<uni-icons type="trash-filled" size="20" color="#eee"></uni-icons>删除</button>
			</view>
		
		</view>
		
		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
		
	</view>
</template>

<script>
	let id;
	export default {
		data() {
			return {
				detail:{},
				onloadstart:false
			};
		},
		onLoad(e){
			id=e.id
			
			console.log(e);
		},
		onShow() {
			this.getdetail();
		},
		methods:{
			//跳转编辑
			goedit(){
				uni.navigateTo({
					url:"/pages/art_edit/art_edit?id="+id
				})
			},
			//删除
			onremove(){
				uni.showModal({
					content:"是否确认删除?",
					success:res=>{
						if(res.confirm){
							this.removefun()
							uni.showToast({
								title:"删除成功!"
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:"/pages/index/index"
								})
							},700)
						}
					}
				})
			},
			removefun(){
				uniCloud.callFunction({
					name:"art_add_row",
					data:{
						api:"rm",
						id
					}
				}).then(res=>{
					console.log(res);
				})
			},
			//获取详情
			getdetail(){
				uniCloud.callFunction({
					name:"art_get_detail",
					data:{
						id
					}
				}).then(res=>{
					console.log(res);
					this.onloadstart=true
					//数组
					this.detail=res.result.data[0]
				}).catch(()=>{
					uni.showToast({
						icon:"fail",
						title:"数据请求失败,可能已删除!"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/index/index"
						})
					},700)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	padding: 30rpx;
	.title{
		font-size: 50rpx;
		color: #000;
		text-align: justify;
		line-height: 1.2em;
	}
	.info{
		font-size:30rpx;
		color: #666;
		padding: 30rpx 0 60rpx 10rpx;
		text{
			padding-right: 30rpx;
		}
	}
	.content{
		font-size: 36rpx;
		line-height: 1.7em;
	}
	.btn{
		padding: 50rpx 0;
		button{
			margin-right: 30rpx;
		}
	}
	.img{
		
		
		
		image{
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}
}
</style>
